<template>
  <section>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button size="small" type="primary" :disabled="scheduleInfoList.length == 0" @click.native="handleApply()">一键排课</el-button>
        <el-button size="small" @click.native="handleAddCondition()">添加条件</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="scheduleInfoList" size="small">
			<el-table-column type="index" label="序号" width="55"/>
			<el-table-column :formatter="methodFormatter" prop="loopType" label="排课方式" min-width="80"/>
			<el-table-column :formatter="dayFormatter" prop="days" label="上课时间" min-width="120"/>
			<el-table-column prop="startTime" label="开始时间" min-width="120"/>
			<el-table-column label="操作" min-width="120">
				<template slot-scope="scope">
				<el-button type="text" size="mini" @click.native="handleEditCondition(scope.$index, scope.row)">编辑</el-button>
				<el-button type="text" size="mini" @click.native="handleDelCondition(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
    </el-table>
		
		<!-- 排课条件对话框 -->
		<el-dialog :visible.sync="scheduleFormVisible" :close-on-click-modal="false" title="班级排课" width="60%">
			<el-form :inline="true" :model="scheduleForm">
				<el-form-item label="重复方式:">
					<el-radio-group v-model="scheduleForm.loopType">
						<el-radio :label="1">每周循环</el-radio>
						<el-radio :label="2">隔周循环</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-col :span="24">
					<el-form-item label="上课时间：">
						<el-checkbox-group v-model="scheduleForm.days">
							<el-checkbox v-for="(day, index) in days" :label="index" :key="index">{{ day }}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-time-picker v-model="scheduleForm.startTime" style="width: 10em" 
						value-format="HH:mm" format="HH:mm"
						:picker-options="{
							selectableRange: '08:00:00 - 23:30:00'
						}"
						placeholder="开始时间"/>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" type="text" @click.native="scheduleFormVisible = false">取消</el-button>
				<el-button size="small" type="primary" @click.native="handleConditionSave()">保存</el-button>
			</div>
		</el-dialog>
  </section>
</template>

<script>
import { updateClassSchedule, applySchedule } from '@/api/class'

const dayOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

export default {
  props: {
    classId: {
      type: [Number, String],
      default: 0,
      required: true
    },
    scheduleInfoList: {
      type: Array,
      required: true
    }
  },
	data() {
		return {
      days: dayOptions,
      applyStatus: 0,
      // 排课条件
      scheduleFormVisible: false,
      scheduleForm: {
        loopType: -1,
        days: [],
        startTime: ''
      },
      scheduleIdx: 0
		}
  },
  mounted() {
    
  },
	methods: {
		methodFormatter: function(row, column) {
      return row.loopType === 1 ? '每周循环' : '隔周循环'
    },
    dayFormatter: function(row, column) {
      var days = []
      row.days.forEach(item => {
        days.push(dayOptions[item] + ' ')
      })
      return days
    },
		handleAddCondition: function() {
      this.scheduleForm = {
        loopType: 1,
        days: [0],
        startTime: '08:00'
      }
      this.formType = 'add'
      this.scheduleFormVisible = true
    },
    handleEditCondition: function(index, row) {
      this.scheduleIdx = index
      this.formType = 'edit'
      this.scheduleForm = row
      this.scheduleFormVisible = true
    },
    handleDelCondition: function(index, row) {
      this.$confirm('确定删除该排课条件？', '提示', {
        confirmButtomText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.scheduleInfoList.length >= 1) {
          this.scheduleInfoList.splice(index, 1)
        }
        const para = {
          classId: this.classId,
          condition: this.scheduleInfoList
        }
        updateClassSchedule(para).then(res => {
          this.applyStatus = 1
        })
      })
    },
    handleConditionSave: function() {
      var that = this.scheduleForm
      if (this.formType === 'add') {
        this.scheduleInfoList.push(that)
      } else {
        this.scheduleInfoList[this.scheduleIdx] = Object.assign({}, that)
      }
      const para = {
        classId: this.classId,
        condition: this.scheduleInfoList
      }
      updateClassSchedule(para).then(res => {
        this.applyStatus = 1
        this.scheduleFormVisible = false
      })
    },
    handleApply: function() {
      this.$confirm('确定应用该排课条件？这将影响本月剩余以及下月的课表', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const para = {
          classId: this.classId
        }
        applySchedule(para).then(res => {
          this.$message({
            message: '课表变更成功',
            type: 'success'
          })
          // 刷新班级课表
          this.$emit('applySuccess', true)
        })
      })
    }
	}
}
</script>

<style>

</style>